<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script type="text/javascript" src="/js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/bootstrap.min.css" />
    <link rel="stylesheet" href="/css/my-css.css" />
    <script type="text/javascript" src="/js/my-js.js" ></script>
    <script type="text/javascript" src="/js/jquery.cookie.js" ></script>
    <script type="text/javascript" src="/js/vue.min.js" ></script>
    <title>Java学习网</title>
    <style type="text/css">
        @media screen and (max-width:768px){
            .my-nav-bar {display: none;}
            .main {width: 100%;}
        }
        .description-text {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 4;
            overflow: hidden;
            height: 80px;
        }
    </style>
</head>
<body>
    <div id="header"></div>
    <script type="text/javascript">moralLoad("#header", "/html/header.html")</script>
    <div class="container" id="categorys" v-cloak>
        <div class="row">
            <div class="col-xs-2 my-nav-bar">
            	<div class="panel panel-default">
            		<div class="panel-heading">
            		    <h3 class="panel-title">
            		        <span class="glyphicon glyphicon-list"></span>&nbsp;课程分类
            		    </h3>
            		</div>
            		<div class="list-group">
            		    <button class="list-group-item" v-for="category in categorys" v-on:click="selectCategory(category.id)">
            		        {{category.name}}
            		    </button>
            		</div>
            	</div>
            </div>
            <div class="col-xs-10 main">
                <div class="panel panel-default" v-for="category in categorys" v-bind:id="'category-' + category.id">
                    <div class="panel-heading">
                        <h3 class="panel-title">
                            <span class="glyphicon glyphicon-th-list"></span>
                             <b v-text="category.name"></b>
                        </h3>
                    </div>
                    <div class="panel-body row">
                        <div class="col-md-4 col-xs-6" v-for="course in category.courses" style="padding: 10px 20px 0 20px;">                        	
                            <a v-bind:href=" '/courseCategorys/' + category.id + '/courses/' + course.id" 
                              class="btn-block well" style="padding: 0 5px 0 5px;">
                        	    <h4><b v-text="course.title"></b></h4>
                        	    <p v-text="course.description" class="description-text"></p>
                        	</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script type="text/javascript">
    var categorys;
    myAjax({
        type: 'get',
        async: false,
        url: '/courseCategorys',
        success: function(data) {
        	categorys = data;
        }
    });
    new Vue({
        el: "#categorys",
        data: categorys
    });
    function selectCategory(id) {
        $("div[id^='category-']").hide();
        $("#category-" + id).show();
    };
</script>
</html>